import React, { useState } from 'react'
import styles from './index.module.less'
import { Search } from 'react-vant';
import home from '../../assets/home.png'
import person from '../../assets/person.png'
import title from '../../assets/title.png'
import math from '../../assets/math.png'
export default function Home() {
  const [value, setValue] = useState('');
  return (
    <div className={styles['home']}>
      <div className={styles['title']}>
        <Search value={value} onChange={setValue} placeholder="请输入搜索关键词" />
      </div>
      <div className={styles['body']}>
           <div className={styles['body-title']}>

              <div className={styles['show-title']}>12 
                <div>今日刷题</div>
                </div>
              <div className={styles['show-title']}>7
                <div>连续打卡</div></div>
            
            <div className={styles['show-title']}>89%
              <div>正确率</div>
            </div>
             
             </div>
             <div className={styles['show-line']}>
             
            <div className={styles['show-content']}>
              
              <div>JavaScript</div>
              89题
            </div>
            <div className={styles['show-content']}>
              <div>CSS</div>
              89题
            </div>
            <div className={styles['show-content']}>
              <div>React</div>
              89题
            </div>
          
           </div>
           
           <div className="body-content"></div>
      </div>
      <div className={styles['foot']}>
        <div className={styles['foot-item']}>
          <img  src={home} alt="" className={styles['foot-img']} />
          <div>
            首页
          </div>
        </div>
        <div className={styles['foot-item']}>
          <img  src={title} alt="" className={styles['foot-img']} />
          <div>
            题库
          </div>
        </div>
        <div className={styles['foot-item']}>
          <img  src={math} alt="" className={styles['foot-img']} />
          <div>
            统计
          </div>
        </div>
        <div className={styles['foot-item']}>
          <img  src={person} alt="" className={styles['foot-img']} />
          <div>
            我的
          </div>
        </div>
      </div>
    </div>
  )
}
